<template xmlns="http://www.w3.org/1999/html">
    <div>

      <headerone msg_header="小宇店家" v-on:child-say="lis"></headerone>
      <img src="../../assets/images/Ere/jh_bg.png" class="img_one" alt="">
      <img src="../../assets/images/Ere/dian.png" class="img_one mr_10" alt="">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="index in data_">
            <p :id="index.shop_id" >{{index.data_hed}}</p>
            <p>{{index.data_con}}</p>
            <img :src="index.img_url">
          </div>
        </div>
        <div class="shop_list">
            <div>
                <div class="list_left ">
                  <img src="../../assets/images/Ere/csota.jpg" alt="" class="fl">
                  <div class="list_right fl">
                    <strong>{{data123}}</strong>
                    <p>456</p>
                    <p>789</p>
                  </div>
                </div>

            </div>
        </div>

        <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
      </div>
    </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import headerone from '../../components/header/header'
    export default {
        data(){
          return{
            data123:'123',
              data_:[
                {
                  data_hed:'Costa',
                  data_con:'商品买7送19',
                  img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'1'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'2'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'3'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'4'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'5'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'6'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'7'
              },{
                data_hed:'Costa',
                data_con:'商品买7送19',
                img_url:require('../../assets/images/Ere/csota.jpg'),
                  shop_id:'8'
              },
              ],
            shop_list:[{
              tx_img:'../../assets/images/Ere/csota.jpg',
              name:'yuyuyuya',
              moy:'20',
              add:'满20减15,满30减25',


            }]
          }
        },
      components:{
        headerone
      },
      created(){

      },
      mounted(){
          this.swiper1()
      },

      methods:{
          lis(msg){
           alert(msg)
          },
        listenToMyBoy:msg=>{

        },
        swiper1(){
          var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
          });
        },
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../static/css/mixins.styl";
.fl
  float: left;
.fr
  float right;
.img_one
  width 100%;
.mr_10
  margin-top -2px;
 .swiper-slide
   width 20%
   img
     width 100%
     p
       text-align center
.shop_list
  width 98%;
  background #fff;
  margin 0 auto;
  img
    width 100%;
    >div
      width 100%;
 .list_left
      width 100%
</style>
